<template>
  <div class="g-page-container">
    <PageHeader title="失销信息查询" />
    <div class="g-content-container">
      <SearchForm ref="search-form" @search="getList(1)" />
      <ButtonGroup :options="buttons" @click="handleButtonClick" />
      <TableList
        :scroll="{ x: '100%', y: 'calc(100vh - 400px)' }"
        :pagination="paginationMixin"
        :loading="loading"
        :data-source="dataSource"
        :row-selection="rowSelectionMixin"
        @change="handleTableChange"
        @number-click="handleNumberClick"
      />
    </div>
    <DrawerDetail :visible.sync="visibleDrawer" :type="type" :detail="detail" />
  </div>
</template>

<script>
import { downloadFile } from '@/utils/index.js';
import { getClueFollowDetails } from '@/api/clue.js';
import { getBusinessDetail } from '@/api/business.js';
import { postLoseListByPage, postleadsBizSnapshoot } from '@/api/lose.js';
import ButtonGroup from '@/components/button/ButtonGroup.vue';
import mixinTable from '@/mixins/mixin-table.js';
import SearchForm from './components/SearchForm.vue';
import TableList from './components/TableList.vue';
import DrawerDetail from './components/DrawerDetail.vue';

export default {
  components: {
    ButtonGroup,
    SearchForm,
    TableList,
    DrawerDetail,
  },
  mixins: [mixinTable],
  data() {
    return {
      visibleDrawer: false,
      detail: {},
      type: '',
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (to.query?.leadsNo) {
        vm.addCallback(to.query);
      }
    });
  },
  computed: {
    buttons() {
      return [
        {
          key: 'export',
          label: '导出',
        },
      ];
    },
    searchForm() {
      return this.$refs['search-form']?.form || {};
    },
  },
  watch: {},
  created() {
    this.getList();
  },

  methods: {
    getSearchForm() {
      const form = {
        bizType: this.$refs['search-form']?.form.bizType,
        bizNo: this.$refs['search-form']?.form.bizNo,
        bizName: this.$refs['search-form']?.form.bizName,
        item: this.$refs['search-form']?.form.item,
        category: this.$refs['search-form']?.form.category,
        startCreateTime: this.$refs['search-form']?.form.startCreateTime,
        endCreateTime: this.$refs['search-form']?.form.endCreateTime,
      };
      const page = {
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
        asc: this.asc,
        column: this.columnKey,
      };
      return { ...form, ...page };
    },
    async getList(val) {
      if (val) {
        this.paginationMixin.current = 1;
      }
      const form = this.getSearchForm();
      this.loading = true;
      const result = await postLoseListByPage(form).finally(
        () => (this.loading = false)
      );
      console.log(result, 'result');
      this.paginationMixin.total = result.data.data?.total;
      this.dataSource = result.data.data?.records;
    },
    // 导出
    async exportCallback() {
      const form = {
        bizType: this.$refs['search-form']?.form.bizType,
        bizNo: this.$refs['search-form']?.form.bizNo,
        bizName: this.$refs['search-form']?.form.bizName,
        item: this.$refs['search-form']?.form.item,
        category: this.$refs['search-form']?.form.category,
        startCreateTime: this.$refs['search-form']?.form.startCreateTime,
        endCreateTime: this.$refs['search-form']?.form.endCreateTime,
      };
      const res = await postleadsBizSnapshoot({
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
        asc: this.asc,
        column: this.columnKey,
        ...form,
      });
      console.log(res, 'sadsada');
      await downloadFile(res.data, '失销信息.xlsx');
    },
    async handleNumberClick(record) {
      this.visibleDrawer = true;
      if (record.bizType === 'leads') {
        const res = await getClueFollowDetails(record.bizNo);
        this.detail = res.data.data;
        console.log(this.detail, '---');
      } else {
        const res = await getBusinessDetail(record.bizNo);
        this.detail = res.data.data;
        console.log(this.detail, '---');
      }
      this.type = record.bizType;
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.asc = sorter.order === 'ascend' ? true : false;
      this.columnKey = sorter.columnKey;
      this.paginationMixin = page;
      this.getList();
    },
  },
};
</script>
